<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

        <el-form-item label="租赁周期" prop="leaseCycle">
          <el-input
            v-model="queryParams.leaseCycle"
            placeholder="请输入周期"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" >
            <el-option
          label="启用"
          value="0">
        </el-option>
        <el-option
        label="禁用"
        value="1">
      </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <!-- <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:order:export']"
          >导出</el-button>
        </el-col> -->
               <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-download"
            size="mini"
            @click="add"
          >添加</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="orderList" border @selection-change="handleSelectionChange">
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="租赁周期" align="center" prop="leaseCycle" />
        <el-table-column label="租赁折扣" align="center" prop="leaseDiscount" />
        <el-table-column label="状态" align="center" prop="status" />
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" >
        <template slot-scope="scope">
          <el-button 
            size="mini"
            type="text"
            icon="el-icon-position"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-position"
            @click="deletes(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 添加或修改订单对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-form-item label="租赁周期" prop="leaseCycle">
            <el-input v-model="form.leaseCycle" placeholder="请输入租赁周期(月)" />
          </el-form-item>
          <el-form-item label="租赁折扣" prop="leaseDiscount">
            <el-input v-model="form.leaseDiscount" placeholder="请输入租赁折扣(例:88代表88折)" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <!-- <el-input v-model="form.status" placeholder="请选择状态" /> -->
            <el-radio-group v-model="form.status">
            <el-radio :label="0" >启用</el-radio>
            <el-radio :label="1" >禁用</el-radio>
          </el-radio-group>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
      <el-dialog :title="kdtitle" :visible.sync="kdopen" width="600px" append-to-body>
        <el-form ref="formkd100" :model="form" :rules="kdrules" label-width="90px">
            <el-input  type="hidden" v-model="form.id" placeholder="请输入主键ID" />
            <el-input  type="hidden" v-model="form.orderNo" placeholder="请输入订单编号" />
          <el-form-item label="快递公司" prop="kdCompany">
            <el-select v-model="form.kdCompany" placeholder="请选择快递公司" style="width:200px" @change="kd100Change">
              <el-option
                v-for="item in dict.type.courier_company"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.raw.status == 1"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单号" prop="kdNumber">
            <el-input v-model="form.kdNumber" placeholder="请输入快递单号" style="width:400px"/>
          </el-form-item>
          <el-form-item label="寄或收件人电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机或座机号码" style="width:400px"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sendInfo">确 定</el-button>
          <el-button @click="kdcancel">取 消</el-button>
        </div>
      </el-dialog>
  
  
  
  
    </div>
  </template>
  
  <script>
  import {discountcycle,add,edit,deletes} from "@/api/system/discountcycle";
  import dict from "@/utils/dict";
  export default {
    dicts: ['courier_company',"order_status"],
    name: "Order",
    data() {
      return {
        updateid:"",
      // 日期范围
        dateRange: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 订单表格数据
        orderList: [],
        // 弹出层标题
        title: "",
        kdtitle:"",
        // 是否显示弹出层
        open: false,
        kdopen: false,
        // 查询参数
        queryParams: {
          leaseCycle:null,
          status:null,
        },
        // 表单参数
        form: {
            id:null,
            leaseCycle:"",
            leaseDiscount:"",
            status:0
        },
        // 表单校验
        rules: {
          userName: [
            { required: true, message: "用户名称不能为空", trigger: "blur" },
            { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
          ],
        },
        kdrules: {
          kdCompany: [
            { required: true, message: "快递公司不能为空", trigger: "blur" }
          ],
          kdNumber: [
            { required: true, message: "快递单号不能为空", trigger: "blur" },
            { pattern: /^[a-zA-Z0-9]+$/, message: "快递单号格式不正确", trigger: "blur" }
          ]
        }
      };
    },
    created() {
      this.getList();
  
    },
    methods: {

      /** 查询订单列表 */
      getList() {
        console.log(this.queryParams);
        
        discountcycle(this.queryParams).then(res=>{
            console.log(res,"数据");
            this.orderList = res.data;
            this.loading = false;
        })
        // this.loading = true;
        // let send = JSON.parse(JSON.stringify(this.queryParams))
        // this.queryParams.selDate
        // if(this.queryParams.selDate && this.queryParams.selDate.length>1){
        //   send.startTime = this.queryParams.selDate[0]
        //   send.endTime = this.queryParams.selDate[1]
        // }
        // listOrder(send).then(response => {
        //   this.orderList = response.rows;
        //   this.total = response.total;
        //   this.loading = false;
        // });
      },
      add(){
        this.open=true
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      kdcancel() {
        this.kdopen = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          orderNo: null,
          orderName: null,
          orderRequestNo: null,
        };
        this.resetForm("form");
      },
  
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加订单";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        // this.form.id= row.id 
        this.form=row
        this.open = true;
        // getOrder(id).then(response => {
        //   this.form = response.data;
          
        //   this.title = "修改订单";
        // });
      },

      /** 提交按钮 */
      submitForm() {
        if(this.form.id!=null){ 
          edit(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.form.id=null
                this.getList();
              });
        }else{
          add(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
        }
      
        // this.$refs["form"].validate(valid => {
        //   if (valid) {
        //     if (this.form.id != null) {
        //       updateOrder(this.form).then(response => {
        //         this.$modal.msgSuccess("修改成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     } else {
        //       add(this.form).then(response => {
        //         this.$modal.msgSuccess("新增成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     }
        //   }
        // });
      },
      deletes(row){
        console.log(row);
        deletes({id:row.id}).then(res=>{

        })
        
      }
    }
  };
  </script>
  